<template>
  <div class="message-column">
    <div v-if="divider" class="divider"></div>
    <div class="content gap-row-8 pointer" @click="$emit('click')">
      <img v-if="system" class="avatar-official" src="@/assets/images/official-avatar-check.png" />
      <Avatar v-else class="avatar" :src="avatarUrl" :radius="30" :vip="vip"></Avatar>
      <div class="center">
        <div class="title gap-row-5">
          <span class="nickname font-size-14 font-weight-500 line-height-140">{{ nickname }}</span>
          <span v-if="username" class="account font-size-14 font-weight-400 line-height-140 text-subtitle">{{
            `@${username}`
          }}</span>
          <PremiumStar v-if="vip"></PremiumStar>
        </div>
        <div class="message font-size-14 font-weight-400 line-height-140 text-grayscale">
          {{ content }}
        </div>
      </div>
      <div class="side pt-1">
        <div class="tag font-size-10 font-weight-500 line-height-120 px-1" :class="{ 'bg-primary': unreadCount > 0 }">
          {{ unreadCount > 999 ? '999+' : unreadCount > 0 ? unreadCount : '' }}
        </div>
        <div class="time font-size-12 font-weight-400 line-height-120 text-subtitle">
          {{ time2 }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, defineAsyncComponent } from 'vue'
import { $t } from '@/i18n'
import { tsSecondToHumanString } from '@/utils/string-helper'
import PremiumStar from '@/components/common/PremiumStar.vue'

const Avatar = defineAsyncComponent(() => import('@/components/multimedia/Avatar.vue'))

const props = defineProps({
  system: { type: Boolean, default: false },
  divider: { type: Boolean, default: false },
  avatarUrl: { type: String },
  nickname: { type: String },
  username: { type: String },
  content: { type: String },
  unreadCount: { type: Number, default: 0 },
  timestamp: { type: Date },
  vip: { type: Boolean, default: false },
})

defineEmits(['click'])

const time2 = computed(() => {
  if (!props.timestamp) return ''
  const v = tsSecondToHumanString(props.timestamp, props.timestamp.toLocaleString('af'))
  return typeof v === 'string' ? v : $t(v.key, v.values)
})
</script>

<style lang="scss" scoped>
.message-column {
  display: flex;
  flex-direction: column;

  .divider {
    width: 100%;
    height: 1px;
    margin: 1rem 0;
    background: rgba(255, 255, 255, 0.27);
  }

  .content {
    width: 100%;
    height: 4.0625rem;
    display: flex;

    .avatar-official {
      width: 3.8125rem;
      height: 3.8125rem;
    }
    .avatar {
      flex-shrink: 0;
      align-self: center;
    }

    .center {
      width: calc(100% - 3.75rem - 1.8125rem);
      flex-grow: 1;

      .title {
        max-width: 14rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: flex;
        align-items: center;
      }

      .message {
        width: calc(
          100vw - 2rem - 3.75rem - 1.8125rem - 1rem
        ); // 2rem: padding-left right, 3.75rem: avatar, 1.8125rem: side, 1rem; flex-gap
        height: 2.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-wrap: break-word;
      }
    }

    .side {
      width: 1.8125rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
      .tag {
        min-width: 0.9375rem;
        height: 0.9375rem;
        border-radius: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: translateX(-0.125rem);
      }
      .time {
        white-space: nowrap;
      }
    }
  }
}

.desktop {
  .message-column .content .center .message {
    width: calc(var(--desktop-main-width) - 2rem - 3.75rem - 1.8125rem - 1rem);
  }
}
</style>
